<!--
 * @Author: jiutian
 * @Date: 2023-01-31 11:11:25
 * @LastEditTime: 2023-03-10 19:27:13
 * @LastEditors:  
-->
<script setup lang="ts">
import { onBeforeMount, reactive, ref, watch } from "vue";
import logoPic from "@imgs/logo.svg";
import defaultPic from "@imgs/user_default.webp";
import { ElMessageBox, ElNotification } from "element-plus";
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
import { useStore } from "@/store";
const $router = useRouter();
const $route = useRoute();
const store = useStore();
let tabsList = reactive([
  {
    label: "首页",
    value: "1",
    routerName: "home",
  },
  {
    label: "发布",
    value: "2",
    routerName: "publish",
  },
  {
    label: "博客圈",
    value: "3",
    routerName: "blogosphere",
  },
]);
let activeTab = ref(sessionStorage.getItem("activeTab") || "1");
let focusFlag = ref(false);
let keyword = ref("");

/**
 * @description 方法
 */

function changeTab(item: object) {
  activeTab.value = item["value"];
  $router.push({
    name: item["routerName"],
  });
}

function command(e: any) {
  if (e == "0") {
    ElMessageBox.confirm("确认要退出吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        ElNotification({
          title: "Success",
          message: "退出登录成功",
          type: "success",
        });
        $router.replace({
          name: "login",
        });
      })
      .catch(() => {});
  } else if (e == "1") {
    $router.push({
      name: "person",
      params: {
        id: store.currentUser.id,
      },
    });
  }
}

function toSearch() {
  if (!keyword.value) return;
  $router.push({
    name: "search",
    query: {
      keyword: keyword.value,
    },
  });
}

watch(
  () => $router.currentRoute.value,
  (newValue, oldValue) => {
    if (newValue.query.keyword) {
      keyword.value = $route.query.keyword;
    }
  },
  { immediate: true }
);

/**
 * @description 生命周期
 */
onBeforeRouteUpdate((to: any) => {
  if (to.name !== "search") {
    keyword.value = "";
  }
});

onBeforeMount(() => {
  let findResult = tabsList.find((v) => useRoute().name == v.routerName);
  if (findResult) {
    activeTab.value = findResult.value;
  }

  // store.getCurrentUser();
});
</script>

<template>
  <div class="header">
    <div class="head_content">
      <div class="logo_com" @click="$router.push({ name: 'home' })">
        <div class="login_pic">
          <img :src="logoPic" alt="" srcset="" />
        </div>
        <span>我的博客</span>
      </div>

      <div class="tabs">
        <div class="tab_content">
          <div
            class="tab_item"
            v-for="item in tabsList"
            :key="item.value"
            @click="changeTab(item)"
          >
            {{ item.label }}
          </div>
        </div>
        <div
          v-if="tabsList.find((v) => v.routerName == useRoute().name)"
          class="tab_line"
          :style="{
            left:
              (Number(activeTab) - 1) * 100 +
              (2 * Number(activeTab) - 1) * 10 +
              'px',
          }"
        ></div>
      </div>

      <div class="search_box" :class="{ focus: focusFlag }">
        <el-input
          type="text"
          @focus="focusFlag = true"
          @blur="focusFlag = false"
          v-model.trim="keyword"
          placeholder="关键字"
          clearable
        >
          <template #append
            ><el-button icon="Search" @click="toSearch"
          /></template>
        </el-input>
      </div>

      <div class="person_box">
        <el-dropdown @command="command">
          <span class="el-dropdown-link">
            <img :src="defaultPic" alt="" srcset="" />
            个人中心
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="1">个人主页</el-dropdown-item>
              <el-dropdown-item command="0">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  box-shadow: 0 0 3px 2px #ededed;
  .head_content {
    width: 70%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    .logo_com {
      display: flex;
      align-items: center;
      cursor: pointer;
      user-select: none;
      .login_pic {
        width: 40px;
        height: 40px;

        img {
          width: 100%;
          height: 100%;
        }
      }
      span {
        margin-left: 10px;
        font-weight: bold;
        font-size: 24px;
      }
    }

    .tabs {
      margin-left: 100px;
      position: relative;
      .tab_content {
        display: flex;
        .tab_item {
          text-align: center;
          width: 100px;
          margin: 0 10px;

          cursor: pointer;
          user-select: none;
          box-sizing: content-box;
        }
      }
      .tab_line {
        width: 100px;
        height: 3px;
        position: absolute;
        bottom: -3px;
        left: 0px;
        background-color: #7d84fe;
        border-radius: 5px;
        transition: all 0.3s;
      }
    }

    .search_box {
      margin-left: 50px;
      width: 400px;
      text-align: right;
      :deep() {
        .el-input {
          width: 250px;
          transition: 0.3s all;
        }
        .el-input-group__append {
          background-color: transparent;
        }
      }
    }
    .focus {
      :deep() {
        .el-input {
          background-color: #7d84fe;
          width: 100%;
          .el-input__wrapper {
            background-color: transparent;
            .el-input__inner {
              color: #fff;
              &::placeholder {
                color: #f9f9f9;
              }
            }
          }
          .el-input-group__append {
            color: #ffd42c;
          }
        }
      }
    }

    .person_box {
      margin-left: 50px;
      display: flex;
      align-items: center;
      .example-showcase .el-dropdown-link {
        cursor: pointer;
        color: var(--el-color-primary);
        display: flex;
        align-items: center;
      }
      .el-dropdown-link {
        display: flex;
        align-items: center;
        img {
          width: 40px;
          height: 40px;
          margin-right: 10px;
        }
      }
    }
  }
}
</style>